<template>
    <div class="wrapper">
        <hr class="hr-solid-content" data-content="column-width">
        
        <p>column-width表示每一栏/列的最佳宽度</p>

        <code>{{ `column-width: <length> | auto;` }}</code>

        <div class="container column-width-container">
            column-width有时候会无效。例如容器宽度400像素，设定的每一栏宽度是300像素，不足以分栏，此时内容填充填充表现为充分利用可用空间，最终呈现的列宽比设定的更宽。又例如容器宽度400像素，column-width设置为500像素，则最终分栏宽度不会超过容器宽度，比设定的500像素要小。
        </div>

        <hr class="hr-solid-content" data-content="column-count">
        
        <p>column-count表示理想的分栏数目</p>

        <code>{{ `column-count: <integer> | auto;` }}</code>

        <div class="container column-count-container">
            这个选项卡测试切换效果建议在PC端浏览器上体验，在移动端，由于宽度限制感受不到后两个选项的差异。在PC桌面端，容器宽度大约700像素出头一点，此时column-width:200px换算成column-count大约3.6的样子。于是，选项卡3分成了2栏，因为column-count:2值更小；而选项卡4由于column-width换算值更小，因此column-width优先级更高，最终分成了3栏显示。
        </div>

        <hr class="hr-solid-content" data-content="column-gap">
        
        <p>column-gap表示每一栏之间的间隙大小</p>

        <code>{{ `column-gap: normal | <length-percentage>;` }}</code>

        <div class="container column-gap-container">
            虽然column-gap属性的默认值normal最终的表现就是1em，但并不表示可以和数值属性值产生transition过渡效果。因此，当我们点击到第一个选项卡的时候，宽度变化是突然的，而不是连续的。column-gap和columns属性发生冲突的时候，例如，column-gap太大，导致空间不足，此时，column-gap是会被舍弃的。
        </div>

        <hr class="hr-solid-content" data-content="column-rule">
        
        <p>column-rule表示每个栏目中间分隔线样式</p>

        <code>{{ `column-rule: column-rule-width column-rule-style column-rule-color;` }}</code>

        <div class="container column-rule-container">
            这个选项卡测试切换效果建议在PC端浏览器上体验，在移动端，由于宽度限制感受不到后两个选项的差异。在PC桌面端，容器宽度大约700像素出头一点，此时column-width:200px换算成column-count大约3.6的样子。于是，选项卡3分成了2栏，因为column-count:2值更小；而选项卡4由于column-width换算值更小，因此column-width优先级更高，最终分成了3栏显示。
        </div>

        <hr class="hr-solid-content" data-content="column-fill">
        
        <p>column-fill表示当内容分栏的时候，如何平衡每一栏填充的内容</p>

        <code>{{ `column-fill: auto | balance | balance-all;` }}</code>

        <div class="container column-fill-container">
            <p style="margin-top: 0;">在HTML中，类似单元格<code>&lt;td&gt;</code>元素可以设置<code>colspan</code>属性，表示合并单元格，例如<code>colspan="3"</code>表示3个普通单元格合并成1个大的单元格。</p>
            <p class="cmn-span"><code>column-span</code>这个CSS属性作用与之类似，只是不能指定具体的数目。要么不跨列，要跨就跨全部条列。</p>
        </div>

        <hr class="hr-solid-content" data-content="column-span">
        
        <p>column-rule-color表示某一个内容是否跨多栏显示</p>

        <code>{{ `column-span: none | all;` }}</code>

        <div class="container column-span-container">
            <p style="margin-top: 0;">这是一堆分成多个的文本列。CSS`column-fill`属性是用于将内容均匀地分布在一起所有列。</p>
            <p style="margin-bottom: 0;"><code>column-fill</code>这个属性的准确渲染需要在Firefox浏览器下才可以看到。当我们点击<code>auto</code>的时候，所有的文字内容应该挤在最左边一栏中才是正确的。但是Chrome和IE下却和<code>balance</code>属性值表现一样。</p>
        </div>

        <hr class="hr-solid-content" data-content="断点相关属性">
        
        <p>break-after列或区域中断在生成的框之后应该如何表现。如果没有生成框，则忽略该属性。</p>
        <p>break-before列或区域中断在生成的框之前应该如何表现。如果没有生成框，则忽略该属性。</p>
        <p>break-inside列或区域发生中断时候的元素该如何表现。如果没有中断，则忽略该属性。</p>

        <code>{{ `break-after: auto | avoid;` }}</code>
        <code>{{ `break-before: auto | avoid;` }}</code>
        <code>{{ `break-inside: auto | avoid;` }}</code>

        <div class="container column-list-container">
            <p class="column-item">岁的弗雷杰阿斯蒂芬杰拉德发简历建立安吉莉卡就对了放个假暗地里飞静安寺两地分居阿斯蒂芬加上劳动法岁的弗雷杰阿斯蒂芬杰拉德发简历建立安吉莉卡就对了放个假暗地里飞静安寺两地分居阿斯蒂芬加上劳动法</p>
            <p class="column-item">岁的弗雷杰阿斯蒂芬杰拉德发简历建立安吉莉卡就对了放个假暗地里飞静安寺两地分居阿斯蒂芬加上劳动法</p>
            <p class="column-item">岁的弗雷杰阿斯蒂芬杰拉德发简历建立安吉莉卡就对了放个假暗地里飞静安寺两地分居阿斯蒂芬加上劳动法</p>
            <p class="column-item">岁的弗雷杰阿斯蒂芬杰拉德发简历建立安吉莉卡就对了放个假暗地里飞静安寺两地分居阿斯蒂芬加上劳动法岁的弗雷杰阿斯蒂芬杰拉德发简历建立安吉莉卡就对了放个假暗地里飞静安寺两地分居阿斯蒂芬加上劳动法岁的弗雷杰阿斯蒂芬杰拉德发简历建立安吉莉卡就对了放个假暗地里飞静安寺两地分居阿斯蒂芬加上劳动法</p>
            <p class="column-item">岁的弗雷杰阿斯蒂芬杰拉德发简历建立安吉莉卡就对了放个假暗地里飞静安寺两地分居阿斯蒂芬加上劳动法</p>
            <p class="column-item">岁的弗雷杰阿斯蒂芬杰拉德发简历建立安吉莉卡就对了放个假暗地里飞静安寺两地分居阿斯蒂芬加上劳动法</p>
        </div>
    </div>
</template>

<style scoped>
.wrapper {
    height: 100%;
    padding: 8px;
    overflow: auto;
}

.container {
    border: 1px solid #ccc;
    padding: 5px;
}

.column-width-container {
    column-width: 100px;
}

.column-count-container {
    column-count: 3;
}

.column-gap-container {
    column-count: 3;
    column-gap: 100px;
}

.column-rule-container {
    column-count: 3;
    column-rule: 2px dotted #1d9ea5;
}

.column-fill-container {
    column-count: 3;
    column-fill: balance;
}

.column-span-container {
    column-count: 3;
}

.column-span-container > .cmn-span {
    column-span: all;
    background: #1d9ea5;
}

.column-list-container {
    column-count: 3;
}

.column-list-container >.column-item {
    padding: 8px;
    background: #fff;
    border: 1px solid #ccc;
    break-inside: avoid;

}
</style>